<template>
  <div class="dy_box">
    <div
      class="list_box"
      :style="{
        transform: `translateY(${y}px)`,
        paddingTop: (moveIndex ? moveIndex - 1 : 0) * clientY + 'px',
      }"
      :class="{ animateClass: flag }"
    >
      <template v-for="(item, index) in renderList">
        <div
          class="video_box"
          :key="item.id"
          v-if="item"
          @touchstart="start"
          @touchmove="move"
          @touchend="end($event, index)"
        >
          <video
            :src="item.src"
            class="video"
            :muted="item.muted"
            :autoplay="index == 0 ? true : false"
            loop
            ref="video"
          ></video>
          <div class="content_box">
            <p class="title">标题标题标题标题标题标题</p>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script type="text/javascript">
let v1 = require("./assets/music/lala.mp4"),
  v2 = require("./assets/music/yilin.mp4"),
  v3 = require("./assets/music/3.mp4"),
  v4 = require("./assets/music/4.mp4"),
  v5 = require("./assets/music/1.mp4");
let clientY =
  document.body.clientHeight || document.documentElement.clientHeight; // 一屏的高度
export default {
  name: "dy",
  data() {
    return {
      list: [
        {
          id: Math.random(),
          muted: true,
          src: v5,
        },
        {
          id: Math.random(),
          muted: true,
          src: v1,
        },
        {
          id: Math.random(),
          muted: true,
          src: v2,
        },
        {
          id: Math.random(),
          muted: true,
          src: v3,
        },
        {
          id: Math.random(),
          muted: true,
          src: v4,
        },
      ],
      y: 0, // 用来控制向上移动的距离
      flag: false,
      moveIndex: 0, // 用来记录当前项
      clientY: clientY,
    };
  },
  computed: {
    renderList() {
      let ary = [];
      ary = this.list.map((item, index) => {
        // 只返回当前屏，当前屏的上一屏 和 下一屏
        if (
          index == this.moveIndex ||
          index == this.moveIndex - 1 ||
          index == this.moveIndex + 1
        ) {
          return item;
        }
      });
      return ary;
    },
  },
  methods: {
    start(e) {
      this.flag = false;
      this.startY = e.touches[0].pageY;
      this.startMoveY = this.y; // 表示在当前这次移动之前 已经移动了多少了
    },
    move(e) {
      let moveY = e.touches[0].pageY - this.startY;
      this.y = moveY + this.startMoveY;
    },
    end(e, n) {
      // 松手的时候移动的距离
      let endY = e.changedTouches[0].pageY - this.startY;
      if (Math.abs(endY) < clientY / 4) {
        // 没划过去
        this.y = this.startMoveY;
      } else {
        // 划过去了
        if (endY < 0) {
          // 下一屏
          if (this.list[n + 1]) {
            // 下边还有内容
            this.y = this.startMoveY - clientY; // 往下走一屏
            // this.$refs.video[n].pause();
            // this.$refs.video[n + 1].play();
            this.moveIndex++;
            this.$nextTick(() => {
              let videos = document.getElementsByClassName("video");
              videos[0] && videos[0].pause();
              videos[2] && videos[2].pause();
              if (videos[1]) {
                videos[1].currentTime = 0;
                // videos[1].muted = false;
                videos[1].play();
              }
            });
          } else {
            this.y = this.startMoveY;
            // 下边没有了
          }
        } else {
          // 上一屏
          if (this.list[n - 1]) {
            this.y = this.startMoveY + clientY;
            // this.$refs.video[n].pause();
            // this.$refs.video[n - 1].play();
            this.moveIndex--;
            this.$nextTick(() => {
              let videos = document.getElementsByClassName("video");
              if (this.moveIndex == 0) {
                videos[1] && videos[1].pause();
                if (videos[0]) {
                  videos[0].currentTime = 0;
                  // videos[0].muted = false;
                  videos[0].play();
                }
              } else {
                videos[0] && videos[0].pause();
                videos[2] && videos[2].pause();
                if (videos[1]) {
                  videos[1].currentTime = 0;
                  // videos[1].muted = false;
                  videos[1].play();
                }
              }
            });
          } else {
            this.y = this.startMoveY;
            // 下边没有了
          }
        }
      }
      this.flag = true;
    },
  },
};
</script>

<style lang="less">
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.dy_box {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  .list_box {
    height: 100%;
    .video_box {
      position: relative;
      height: 100%;
      background-color: #000;
      video {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 10;
        top: 0;
        left: 0;
      }
      .content_box {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 20;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0);
        .title {
          position: absolute;
          bottom: 50px;
          color: #fff;
          box-sizing: border-box;
          padding: 20px;
        }
      }
    }
  }
  .animateClass {
    transition: transform 0.2s;
  }
}
</style>
